<template>
  <div class="about">
    <h1>测试State</h1>
    <div>{{$store.state.count}}</div>
    <div>{{count}}</div>
    <div>{{abc}}</div>
    <div>{{list.length}}</div>
    <div>
      <!-- <button @click='handleClick1'>点击+</button>
      <button @click='handleClick2'>点击-</button> -->
      <!-- <button @click='add(2)'>点击+</button>
      <button @click='sub(1)'>点击-</button> -->
      <button @click='increment(2)'>点击+</button>
      <button @click='decrement(1)'>点击-</button>
    </div>
    <div>
      <!-- <button @click='handleQuery'>查询</button> -->
      <button @click='queryData'>查询</button>
      <!-- <button @click='fn'>查询</button> -->
    </div>
    <!-- ------------------------------------ -->
    <!-- 完整数据 -->
    <ul>
      <li v-for='item in list' :key='item.id'>{{item.title}}</li>
    </ul>
    <hr>
    <ul>
      <li v-for='item in getPartList' :key='item.id'>{{item.title}}</li>
    </ul>
  </div>
</template>
<script>
// 把state中的数据映射到计算属性中
// mapMutations 可以把mutation映射为函数
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'About',
  data () {
    return {
      listArr: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    ...mapActions(['queryData']),
    // ---------------------------------------
    // ...mapActions({
    // 冒号左侧表示方法名称
    // 冒号右侧表示action名称
    // fn: 'queryData'
    // }),
    ...mapMutations(['increment', 'decrement']),
    // ...mapMutations({
    // 冒号左侧是函数名称
    // 冒号右侧为触发的mutation名称
    // increment: 'increment',
    // decrement: 'decrement'
    // add: 'increment',
    // sub: 'decrement'
    // }),
    handleClick1 () {
      // 通过触发mutation修改state中的count的值
      this.$store.commit('increment', 2)
    },
    handleClick2 () {
      this.$store.commit('decrement', 1)
    },
    handleQuery () {
      // console.log('hello')
      this.$store.dispatch('queryData', 111)
    }
  },
  // 组合映射的计算属性和自定义计算属性
  computed: {
    ...mapGetters(['getPartList']),
    // ...mapGetters({
    //   calcList: 'getPartList'
    // }),
    // calcList () {
    //   // 注意：获取getters的值，不需要加括号（当属性使用）
    //   return this.$store.getters.getPartList
    // },
    calcNum () {
      return this.listArr.filter(item => {
        return item > 2
      })
    },
    // 解构赋值
    ...mapState(['count', 'abc', 'list'])
  }
  // 基于如下的方式，可以直接获取state中的属性信息
  // computed: mapState(['count', 'abc'])
  // ----------------------------------------------
  // computed: mapState({
  // 计算属性函数的形参就是state，不再需要this.$store
  // count: function (state) {
  //   return state.count
  // },
  // count (state) {
  //   return state.count
  // },
  // count: (state) => {
  //   return state.count
  // },
  // count: state => state.count
  // })
  // --------------------------------------------
  // computed: {
  // 基于计算属性的方式，优化store中数据的获取
  // 希望模板中代码足够简单
  // count () {
  //   return this.$store.state.count
  // },
  // count: function () {
  //   return this.$store.state.count
  // }
  // 不可以使用如下的箭头函数方式（箭头函数本身没有this）
  // count函数没有父级函数，所以this是undefined
  // count: () => {
  //   // return this.$store.state.count
  //   console.log(this)
  //   return 1
  // }
  // }
}
</script>
